<template>
    <lb-layout>
      <div class="servicenavigation-top">
        <div class="jurisdiction">
          {{
            type === 1
              ? "能耗管理部门"
              : type === 2
              ? "用能部门"
              : type === 3
              ? "财务部门"
              : ""
          }}
        </div>
      </div>
      <el-card class="mt10">
        <Title
          :name="
            type === 3
              ? '能耗预算管理'
              : type === 2
              ? '智慧能耗用能'
              : '智慧能耗治理'
          "
          :line="false"
        >
          <div class="zhnh-box">
            <div v-for="(item, index) in topList" :key="index">
              <div v-if="item.type === 1" class="zhnh-content">
                <div
                  v-for="(it, idx) in item.children"
                  :key="idx"
                  :class="it.disabled ? 'zhnh-title disabled' : 'zhnh-title'"
                  @click="toPath(it)"
                >
                  <img :src="it.icon" alt="" />
                  <div>{{ it.name }}</div>
                </div>
              </div>
              <div v-if="item.type === 2" class="arrows">
                <img :src="item.icon" alt="" />
              </div>
            </div>
          </div>
        </Title>
      </el-card>
      <el-card v-if="type === 3" class="mt10">
        <Title name="能耗治理标准规范、培训平台" :line="false">
          <div class="fqfl-box">
            <div v-for="(item, index) in czList" :key="index">
              <div class="fqfl-content">
                <div
                  v-for="(it, idx) in item.children"
                  :key="idx"
                  :class="it.disabled ? 'fqfl-title disabled' : 'fqfl-title'"
                  @click="toPath(it)"
                >
                  <img :src="it.icon" alt="" />
                  <div>{{ it.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </Title>
      </el-card>
      <el-row v-else :gutter="20" style="margin: 0">
        <el-col :span="14" style="padding-left: 0">
          <el-card class="mt10">
            <Title name="能耗分区分类分项计量" :line="false">
              <div class="fqfl-box">
                <div v-for="(item, index) in fqflList" :key="index">
                  <div class="fqfl-content">
                    <div
                      v-for="(it, idx) in item.children"
                      :key="idx"
                      :class="it.disabled ? 'fqfl-title disabled' : 'fqfl-title'"
                      @click="toPath(it)"
                    >
                      <img :src="it.icon" alt="" />
                      <div>{{ it.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </Title>
          </el-card>
        </el-col>
        <el-col :span="10" style="padding-right: 0">
          <el-card class="mt10">
            <Title name="能耗治理标准规范、培训平台" :line="false">
              <div class="fqfl-box">
                <div v-for="(item, index) in nhzlList" :key="index">
                  <div class="fqfl-content">
                    <div
                      v-for="(it, idx) in item.children"
                      :key="idx"
                      :class="it.disabled ? 'fqfl-title disabled' : 'fqfl-title'"
                      @click="toPath(it)"
                    >
                      <img :src="it.icon" alt="" />
                      <div>{{ it.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </Title>
          </el-card>
        </el-col>
      </el-row>
    </lb-layout>
  </template>
  
  <script>
  import auth from "@/plugins/auth";
  export default {
    components: {},
    data() {
      return {
        type: 1, // 1 能耗部门 2用能部门 3 财政部门
        topList: [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/iot/network",
                icon: require("@/assets/images/index/servicenavigation/p11.png"),
                name: "能耗预算管理",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/index",
                icon: require("@/assets/images/index/servicenavigation/p4.png"),
                name: "人工干预",
              },
            ],
          },
          {
            icon: require("@/assets/images/index/servicenavigation/arrows.png"),
            type: 2,
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/index",
                icon: require("@/assets/images/index/servicenavigation/p12.png"),
                name: "可使用预算额度",
              },
            ],
          },
        ],
        fqflList: [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/iot/energy",
                icon: require("@/assets/images/index/servicenavigation/p13.png"),
                name: "抄表流水",
              },
              {
                disabled: true,
                url: "/iot/inspect",
                icon: require("@/assets/images/index/servicenavigation/p27.png"),
                name: "实时监测",
              },
              {
                disabled: true,
                url: "/iot/inspect",
                icon: require("@/assets/images/index/servicenavigation/p21.png"),
                name: "能耗行为",
              },
            ],
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/system/dept",
                icon: require("@/assets/images/index/servicenavigation/p22.png"),
                name: "用能单位",
              },
              {
                disabled: true,
                url: "/iot/network",
                icon: require("@/assets/images/index/servicenavigation/p24.png"),
                name: "能耗网点",
              },
              {
                disabled: true,
                url: "/iot/archives",
                icon: require("@/assets/images/index/servicenavigation/p18.png"),
                name: "计量设备",
              },
            ],
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/iot/energy",
                icon: require("@/assets/images/index/servicenavigation/p17.png"),
                name: "应关未关",
              },
              {
                disabled: true,
                url: "/iot/inspect",
                icon: require("@/assets/images/index/servicenavigation/p20.png"),
                name: "离线计量设备",
              },
              {
                disabled: true,
                url: "/iot/inspect",
                icon: require("@/assets/images/index/servicenavigation/p19.png"),
                name: "跳闸计量设备",
              },
            ],
          },
        ],
        nhzlList: [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/energyconsumption/quota",
                icon: require("@/assets/images/index/servicenavigation/p15.png"),
                name: "额度管理标准",
              },
              {
                disabled: true,
                url: "/energyconsumption/energyCoal",
                icon: require("@/assets/images/index/servicenavigation/p26.png"),
                name: "预算管理标准",
              },
              {
                disabled: true,
                url: "/energyconsumption/unitprice",
                icon: require("@/assets/images/index/servicenavigation/p14.png"),
                name: "能耗单价管理",
              },
            ],
          },
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/energyconsumption/solarTerms",
                icon: require("@/assets/images/index/servicenavigation/p23.png"),
                name: "24节气参数",
              },
              {
                disabled: true,
                url: "/energyconsumption/earlyWarning",
                icon: require("@/assets/images/index/servicenavigation/p23.png"),
                name: "智能预警规则",
              },
              {
                disabled: true,
                url: "/quota/conference/consultation",
                icon: require("@/assets/images/index/servicenavigation/p16.png"),
                name: "考核会商机制",
              },
            ],
          },
        ],
        czList: [
          {
            type: 1,
            children: [
              {
                disabled: true,
                url: "/energyconsumption/quota",
                icon: require("@/assets/images/index/servicenavigation/p15.png"),
                name: "额度管理标准",
              },
              {
                disabled: true,
                url: "/energyconsumption/energyCoal",
                icon: require("@/assets/images/index/servicenavigation/p26.png"),
                name: "预算管理标准",
              },
            ],
          },
        ],
      };
    },
    created() {
      this.judgeRole();
    },
    methods: {
      judgeRole() {
        if (auth.hasRole("nhgl_user") || auth.hasRole("nhgl_leader")) {
          this.type = 1;
          this.name = "能耗管理部门";
          this.topList = [
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/iot/energy",
                  icon: require("@/assets/images/index/servicenavigation/p1.png"),
                  name: "终端能耗流水",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/limit/allocation",
                  icon: require("@/assets/images/index/servicenavigation/p2.png"),
                  name: "能耗额度管理",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p11.png"),
                  name: "能耗预算管理",
                  disabled: true,
                  url: "/quota/limit/budget",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p3.png"),
                  name: "能耗公摊管理",
                  disabled: true,
                  url: "/quota/limit/pooled",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p3.png"),
                  name: "能耗额度评估",
                  disabled: true,
                  url: "/quota/limit/energy",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/forewarningModel/statisticAnalysi",
                  icon: require("@/assets/images/index/servicenavigation/p5.png"),
                  name: "能耗诊断",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p4.png"),
                  name: "人工干预",
                  disabled: true,
                  url: "/quota/forewarningModel/alarmCommand",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/analyse/winddirection",
                  icon: require("@/assets/images/index/servicenavigation/p9.png"),
                  name: "楼宇能耗概况",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p7.png"),
                  name: "机关能耗",
                  disabled: true,
                  url: "/quota/analyse/winddirection",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p6.png"),
                  name: "分区分项能耗",
                  disabled: true,
                  url: "/quota/analyse/winddirection",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p8.png"),
                  name: "预警应对建议方案",
                  disabled: true,
                  url: "/quota/forewarningModel/alarmCommand",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p10.png"),
                  name: "碳中和建议方案",
                  disabled: true,
                  url: "/carbonNeutral/government",
                },
              ],
            },
          ];
        } else if (auth.hasRole("ynbm_user") || auth.hasRole("ynbm_leader")) {
          this.type = 2;
          this.topList = [
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/iot/energy",
                  icon: require("@/assets/images/index/servicenavigation/p1.png"),
                  name: "本单位终端能耗流水",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/limit/allocation",
                  icon: require("@/assets/images/index/servicenavigation/p2.png"),
                  name: "本单位能耗额度管理",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p11.png"),
                  name: "本单位能耗预算管理",
                  disabled: true,
                  url: "/quota/limit/budget",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/forewarningModel/statisticAnalysi",
                  icon: require("@/assets/images/index/servicenavigation/p5.png"),
                  name: "本单位能耗诊断",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p4.png"),
                  name: "本单位人工干预",
                  disabled: true,
                  url: "/quota/forewarningModel/alarmCommand",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/analyse/winddirection",
                  icon: require("@/assets/images/index/servicenavigation/p9.png"),
                  name: "本单位楼宇能耗概况",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p7.png"),
                  name: "本单位机关能耗",
                  disabled: true,
                  url: "/quota/analyse/winddirection",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p6.png"),
                  name: "本单位分区分项能耗",
                  disabled: true,
                  url: "/quota/analyse/winddirection",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p8.png"),
                  name: "本单位预警应对建议方案",
                  disabled: true,
                  url: "/quota/forewarningModel/alarmCommand",
                },
                {
                  icon: require("@/assets/images/index/servicenavigation/p10.png"),
                  name: "本单位碳中和建议方案",
                  disabled: true,
                  url: "/carbonNeutral/government",
                },
              ],
            },
          ];
        } else if (auth.hasRole("czbm_leader")) {
          this.name = "财务部门";
          this.type = 3;
          this.topList = [
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/limit/budget",
                  icon: require("@/assets/images/index/servicenavigation/p11.png"),
                  name: "能耗预算管理",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/forewarningModel/alarmCommand",
                  icon: require("@/assets/images/index/servicenavigation/p4.png"),
                  name: "人工干预",
                },
              ],
            },
            {
              icon: require("@/assets/images/index/servicenavigation/arrows.png"),
              type: 2,
            },
            {
              type: 1,
              children: [
                {
                  disabled: true,
                  url: "/quota/limit/budget",
                  icon: require("@/assets/images/index/servicenavigation/p12.png"),
                  name: "可使用预算额度",
                },
              ],
            },
          ];
        }
        this.topList = this.hanldeReset(this.topList);
        console.log(this.topList);
        this.czList = this.hanldeReset(this.czList);
        this.fqflList = this.hanldeReset(this.fqflList);
        this.nhzlList = this.hanldeReset(this.nhzlList);
      },
      hanldeReset(arr) {
        const tiledRouters = this.$store.state.permission.tiledRouters;
        let list = arr.map((item) => {
          if (item.type === 1) {
            item.children.map((it) => {
              it.disabled = tiledRouters.includes(it.url) === true ? false : true;
              return it;
            });
          }
          return item;
        });
        return list;
      },
      toPath(data) {
        if (data.disabled) {
          return false;
        }
        this.$router.push(data.url).catch(() => {});
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .title-container {
    padding: 0 !important;
  }
  .servicenavigation-top {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    background: url("~@/assets/images/index/servicenavigation/servicenavigation-bg.png")
      center bottom no-repeat;
    background-size: 100% 100%;
    position: relative;
  
    .jurisdiction {
      width: 136px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      background: #10B767;
      border-radius: 4px;
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
  
  .zhnh-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  
    .zhnh-content {
      width: 240px;
      height: 280px;
      padding: 20px;
      background: rgba(36, 120, 124, 0.04);
      border-radius: 8px;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;
  
      .zhnh-title {
        display: flex;
        // justify-content: center;
        align-items: center;
        font-size: 18px;
        box-sizing: border-box;
        margin: 6px 0;
        cursor: pointer;
  
        &:hover {
          color: #10B767;
        }
  
        img {
          width: 44px;
          height: 44px;
          margin-right: 6px;
        }
      }
  
      .disabled {
        color: #c0c4cc;
        cursor: not-allowed;
  
        &:hover {
          color: #c0c4cc;
        }
      }
    }
  
    .arrows {
      margin: 0 20px;
    }
  }
  
  .fqfl-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  
    .fqfl-content {
      width: 240px;
      height: 220px;
      padding: 20px;
      background: rgba(36, 120, 124, 0.04);
      border-radius: 8px;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;
  
      .fqfl-title {
        width: 210px;
        height: 44px;
        padding: 0 30px;
        background: #ffffff;
        border-radius: 30px;
        display: flex;
        // justify-content: center;
        align-items: center;
        font-size: 18px;
        box-sizing: border-box;
        margin: 6px 0;
        cursor: pointer;
  
        &:hover {
          color: #10B767;
        }
  
        img {
          width: 24px;
          height: 24px;
          margin-right: 6px;
        }
      }
  
      .disabled {
        color: #c0c4cc;
        cursor: not-allowed;
  
        &:hover {
          color: #c0c4cc;
        }
      }
    }
  
    .arrows {
      margin: 0 20px;
    }
  }
  </style>
  